<template>
    <div class="block">
        <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="loading">

            <el-table-column
                    prop="name"
                    label="套餐名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="comboPic"
                    label="图片"
                    width="180">
              <template slot-scope="scope">
                <el-image :src="scope.row.comboPic" :preview-src-list="[scope.row.comboPic]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
                    prop="defaultMoney"
                    label="默认价格"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="money"
                    label="折扣价格"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="cinemaName"
                    label="影院名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="180"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="insertTime"
                    label="添加时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="修改时间"
                    width="180">
            </el-table-column>
            <el-table-column  label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleUpdate(scope.$index)">修改</el-button>
                    <el-popconfirm
                            confirm-button-text='好的'
                            cancel-button-text='不用了'
                            icon="el-icon-info"
                            icon-color="red"
                            title="这是一段内容确定删除吗？"
                            @confirm="handleDelete(scope.$index)"
                    >
                        <el-button slot="reference" size="mini">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <span class="demonstration">{{page}}</span>
        <el-pagination
                @current-change="handlePage"
                :current-page.sync="page"
                :page-size="pagesize"
                layout="total, prev, pager, next"
                :total=this.total>
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "FoodListView.vue",
        data(){
            return{
                loading:true,
                tableData:[],
                total: '',
                pagesize:5,
                page:1,
                input:'',
            }
        },
        created() {
            this.handleList();
        },
        methods:{
            handleDelete(index){
                this.axios.get("manage/combo/delete",{params:{id:this.tableData[index].id}}).then(response=>{
                    if (response.data.code==200){
                        this.tableData.splice(index,1);
                    }
                })
            },
            handlePage(){
                this.axios.get("manage/combo/list",{params:{keyword:this.input,pageNum:this.page}}).then(response=>{
                    if (response.data.code){
                        this.tableData = response.data.data.list;
                    }
                })
            },
            handleList(){
                this.axios.get("manage/combo/list").then(response =>{
                    if(response.data.code==200){
                        this.tableData = response.data.data.list;
                        this.total = response.data.data.total;

                    }
                }).finally(()=>this.loading=false)
            },
            handleUpdate(index){
                const data=this.tableData[index];
                this.ruleForm=data;
                this.updateShow=!this.updateShow;
                this.$router.push({path:'/food/addcombo',query:{data:data}})
            },
            sortTable({prop, order}) {
                if (order === "ascending") {
                    this.tableData.sort((a, b) => this.sortName(a[prop], b[prop]));
                } else if (order === "descending") {
                    this.tableData.sort((a, b) => this.sortName(b[prop], a[prop]));
                } else {
                    this.tableData = [...this.tableDateCopy];
                }
            },
            sortName(a, b) {
                if (a < b) return -1;
                if (a > b) return 1;
                return 0;
            },
        }
    }
</script>

<style scoped>

</style>